<script lang="ts">
import { defineComponent, reactive, ref, useAttrs } from "vue";
import {
  NButton,
  NDrawer,
  NDrawerContent,
  NForm,
  NFormItem,
  NInput,
  FormInst,
} from "naive-ui";
import { DialogProps } from "@/type";
import { omit } from "lodash";

export default defineComponent({
  name: "h-drawer",
  components: {
    NButton,
    NDrawer,
    NDrawerContent,
    NFormItem,
    NForm,
    NInput,
  },
  setup() {
    const formValue = ref<any>({});
    const formRef = ref<FormInst | null>(null);
    const  detailProps  = useAttrs() as detailProps;

    return {
      formRef,
      formValue,
      // state,
      detailProps,
    };
  },
  methods: {
    /* onCloseBtn() {
      this.formValue = {};
      this.dialogshow?.(false);
      console.log("关闭按钮" + this.dialogshow);
    }, */
  },
  computed: {
    dialogAttrs() {
      const { title, dialogshow, ...otherAttrs } = this
        .$attrs as DialogProps;
      // this.formValue = JSON.parse(JSON.stringify(row ?? {}));
      // console.log("formValue=>", this.formValue);
      return ({
    
        ...otherAttrs,
      });
    },
  },
});
</script>
<template>
  <n-drawer
    :width="502"
    v-bind="detailProps"
    @update:show="(value: boolean) => detailProps.dialogshow(value)"
    >
    <n-drawer-content closable>
      <template #header>详情</template>
      <div class="drawer-default">
        <n-form
          ref="formRef"
          :model="formValue"
          label-placement="left"
          label-width="100px"
        >
          <n-form-item label="方案名称：" path="scenarioName">
            <div class="value">{{ formValue?.scenarioName ?? "-" }}</div>
          </n-form-item>
          <n-form-item label="规则名称：" path="associationRules">
            <div class="value">{{ formValue?.associationRules ?? "-" }}</div>
          </n-form-item>
          <n-form-item label="效验表：" path="associationRules">
            <div class="value">{{ formValue?.associationRules ?? "-" }}</div>
          </n-form-item>
          <n-form-item label="检查字段：" path="associationRules">
            <div class="value">{{ formValue?.associationRules ?? "-" }}</div>
          </n-form-item>
          <n-form-item label="效验范围：" path="checkRange">
            <div class="value">{{ formValue?.checkRange ?? "-" }}</div>
          </n-form-item>
          <n-form-item label="执行时间：" path="excutionTime">
            <div class="value">{{ formValue?.excutionTime ?? "-" }}</div>
          </n-form-item>
          <n-form-item label="源数据值：" path="associationRules">
            <div class="value">{{ formValue?.associationRules ?? "-" }}</div>
          </n-form-item>
          <n-form-item label="平台数据值：" path="associationRules">
            <div class="value">{{ formValue?.associationRules ?? "-" }}</div>
          </n-form-item>
          <n-form-item label="是否一致：" path="associationRules">
            <div class="value">{{ formValue?.associationRules ?? "-" }}</div>
          </n-form-item>
          <n-form-item label="关联ETL包：" path="associationRules">
            <div class="value">{{ formValue?.associationRules ?? "-" }}</div>
          </n-form-item>
        </n-form>
      </div>
      <template #footer>
        <n-button type="primary" round>确定</n-button>
      </template>
    </n-drawer-content>
  </n-drawer>
</template>
